<template>
	<div class="layout" :class="{'layout-hide-texts': spanLefts < 5}">
		<Row type="flex">
			<Col :span="spanLefts" class="layout-menu-left">
			<Menu active-name="Menu" theme="light" width="auto">
				<div class="layout-search-left">
					<Input v-model="value" icon="ios-search" placeholder="Search..." style="width: 100%"></Input>
				</div>

				<MenuGroup title="分类目录">
					<ol>
						<li v-for="(item,index) in Menuitems">
							<MenuItem v-bind:name="index">
								<Icon type="ios-navigate" :size="iconSize"></Icon>
								<span class="layout-text">{{item.name}}({{item.amout}})</span>
							</MenuItem>
						</li>
					</ol>
				</MenuGroup>

				<MenuGroup title="内容管理">
					<Menu active-name="contentManage" theme="light" width="auto" :open-names="['1']" @on-select="selectEvents">
						<div class="layout-logo-left"></div>
						<Submenu name="articleManageTitle">
							<template slot="title">
								<Icon type="document-text" :size="iconSize"></Icon>
								文章管理
							</template>
							<MenuItem name="logAdd">
								<span >新增</span></MenuItem>
								<MenuItem name="logDel">
									<span >删除</span></MenuItem>
								</MenuItem>
							</Submenu>
							<Submenu name="commitManage">
								<template slot="title">
									<Icon type="chatbubbles" :size="iconSize"></Icon>
									评论管理
								</template>
								<MenuItem name="commitSet">评论设置</MenuItem>
								<MenuItem name="commitDel">删除评论</MenuItem>
							</Submenu>
						</Menu>
				</MenuGroup>

			</Menu>
		</Col>
		<Col :span="spanRights">
		<div class="layout-header">
			<!-- <Button type="text" @click="toggleClick"> -->
			<!-- <Button type="text">
				<Icon type="navicon" size="32"></Icon>
			</Button> -->
			<span style="font-size: large;font-weight: bold;padding: 10px;">技术日志</span>
		</div>
		<div class="layout-content">
			<div class="layout-content-main">
				<section v-if="isShow">
					<article class="bgColor" v-for="(journal,index) in journals">
						<div class="content">
							<div class="contentDetail">
								<div class="journalHeader">
									{{journal.title}}
								</div>
								<div class="journalDetail">
									<p>{{journal.content}}</p>
								</div>
							</div>
							<!-- <div class="toorbars">
							</div> -->
							<div class="toorbars">
								<span class="visible-lg visible-md visible-sm pull-left">
									<a href="http://localhost:8080/#/BackHome/Journal"><i class="fa fa-calendar"></i>{{journal.write_time}}</a>
									<a href="http://localhost:8080/#/BackHome/Journal"><i class="fa fa-commenting-o"></i> 0 Comments</a>
								</span>
								<span class="pull-left">
									<a href="http://localhost:8080/#/BackHome/Journal"><i class="fa fa-eye"></i> 0 Views</a>
									<a href="http://localhost:8080/#/BackHome/Journal"><i class="fa fa-thumbs-o-up"></i> 0 Times</a>
								</span>
								<span class="pull-right">
									<a class="read-more" href="http://localhost:8080/#/BackHome/Journal" title="阅读全文">阅读全文 <i class="fa fa-chevron-circle-right"></i></a>
								</span>
							</div>
						</div>
					</article>

				</section>
			</div>
		</div>
		<div class="layout-copy">
			COPYRIGHT 2017 互联网前端实验室. ALL RIGHTS RESERVED.
			<div>THEME KRATOS MADE BY VTROIS</div>
		</div>
	</Col>
</Row>
</div>
</template>
<script>

	import {postDataToServer} from '../../assets/js/post.js'
	export default {
		data () {
			return {
				isShow:true,
				spanLefts: 5,
				spanRights: 19,
				value:'',
				Menuitems:[{
					name:'Android开发',
					amout:2
				},
				{
					name:'Bug汇总' ,
					amout:2
				},
				{
					name:'eclips',
					amout:3
				}],
				journals:[{
					title:'No Datas',
					content:'抱歉，没有获取到数据！'
				}]
			}
		},
		computed: {
			iconSize () {
				return this.spanLefts === 5 ? 14 : 24;
			}
		},
		methods: {
			toggleClick () {
				if (this.spanLefts === 5) {
					this.spanLefts = 2;
					this.spanRights = 22;
				} else {
					this.spanLefts = 5;
					this.spanRights = 19;
				}
			},
			initAllJournals(){
				let _this = this;
				let data = new Object();
				data.url = "LOG_LISTPAGE";
				postDataToServer(data).then((data)=>{
					this.journals = data.data.rows;
					// console.log(2333)
					console.log(this.journals)
				})
			},
			selectEvents(name){
				if(name == 'logAdd'){
					this.isShow = false;
				}
				// console.log(name)
				// let _this = this;
				// let data = new Object();
				// data.url = "LOG_ADD";
				// console.log(265)
				// postDataToServer(data).then((data)=>{
				// 	// this.journals = data.data.rows;
				// 	console.log(2333)
				// 	console.log(data)
				// })
			}
		},
		mounted(){
			this.initAllJournals();
		}
	}
</script>

<style scoped>
.layout{
	border: 1px solid #d7dde4;
	background: #f5f7f9;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}
.layout-content{
	min-height: 500px;
	margin: 15px;
	overflow: hidden;
	background: #fff;
	border-radius: 4px;
}
.layout-content-main{
	padding: 10px;
}
.layout-copy{
	text-align: center;
	padding: 10px 0 20px;
	color: #9ea7b4;
}
.layout-menu-left{
	background: white;
}
.layout-header{
	text-align: center;
	height: 60px;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
	padding: 15px;
	/*word-spacing: 5px;*/
	letter-spacing: 10px;
}
.layout-search-left{
	width: 90%;
	height: 30px;
	background: #5b6270;
	border-radius: 3px;
	margin: 15px auto;
}
.layout-ceiling-main a{
	color: #9ba7b5;
}
.layout-hide-texts .layout-text{
	display: none;
}
.ivu-col{
	transition: width .2s ease-in-out;
}

.content{
	/*height: 229px;*/
	background-color: #f5f5f5;
}
.contentImg img{
	float: left;
	height: 40px;
	width: 40px;
}
.contentDetail{
	/*overflow: hidden;*/
	/*height: 30px;*/
}
.bgColor{
	color: grey;
	padding: 5px;
}

.journalHeader{
	text-align: center;
	/*display: inline-block;*/
	width: 100%;
	height: 40px;
	padding: 10px;
	font-weight: bold;
	font-size: 16px;
}
.journalDetail{
	margin-right: 20px;
	margin-left: 20px;
	position: relative;
	line-height: 20px;
	max-height: 140px;
	overflow: hidden;
}
.journalDetail::after{
	content: "...";
	position: absolute; 
	bottom: 0; 
	right: 0;
	/*color: blue;*/
	/*font-weight: bold;*/
	/*padding-left: 40px;*/
}
.toorbars{
	height: 40px;
	margin: 20px;
	letter-spacing: 2px;
}
</style>